<template>
  <div class="m-cost">
    <div class="cost-intro">费用说明</div>
    <hr/>
    <div class="cost-tips">费用包括：</div>
    <ul class="cost-ol">
      <li>1、交通：行程中所列大巴车服务，行程所列船票费用</li>
      <li>2、餐饮：行程内所列餐食</li>
      <li>3、服务人员：行程内所列餐食</li>
      <li>4、保险：行程内所列餐食</li>
      <li>5、其他费用：行程内所列餐饮</li>
    </ul>

    <div class="cost-tips">费用不包括：</div>
    <ul class="cost-ol">
      <li>1、个人消费</li>
      <li>2、餐饮费</li>
      <li>3、个人消费以及以上未提及的费用</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'm-cost',
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-cost{
    width: 100%;
    height: 6.14rem;
    padding: 0.24rem 0.3rem;
    background-color: #FFF;
    border-bottom: 1px solid #D7D7D7;
    border-top: 1px solid #D7D7D7;
    font-size: 0.28rem;
    margin-bottom: 0.28rem;
  }
  .cost-intro{
    width: 100%;
    /*height: 0.7rem;*/
    font-size: 0.3rem;
    font-weight: bold;
    color: #333;
  }
  .cost-tips{
    color: #333;
    margin-bottom: 0.15rem;
  }
  .cost-ol{
    color: #777;
    margin-bottom: 0.15rem;
  }

</style>
